昨天把功能樹狀圖給分析好了，接著要來製作一些模擬的畫面，這樣比較有感覺~~
製作模擬畫面之前我常用的單字叫 「Mockup」，也就是製作模型的意思，如果嚴格來說，是指那種3D立體的實物模型，後來也通用在程式的模擬畫面上，總之...你懂我的意思就好 :P

最近敝公司在開發新的Web Application的專案，又學到了一個新的單字叫「Wireframe」，早期 Wireframe Model 也是指3D線條模型，後來 Web Application 盛行的今日，我們也把網站的草圖、流程設計叫 Web Wireframe。

不論是叫 Mockup 或是 Welframe，目的都是用圖像的方式，來讓開發者、客戶、PM等更容易溝通、了解整個系統的操作流程。拜問Google大神，你會發現最近這類的輔助工具種類非常多，而且幾乎都能透過WYSWYG拖拉的方式，不用寫程式碼就能做出一個互動式的模擬操作介面，但好像沒有免費的 :P

目前以iPhone/iPad操作元件為基礎的這類軟體好像不是很多，我目前找到的都是靜態的而已，在這介紹兩個：

1. iPhoneMockup
   它是一個免費的網頁程式，直接在網頁上就能用拖拉的方式把iPhone的操作畫面給畫出來，不過就只有線條而已。

2. OmniGraffle
   OmniGraffle是一套Mac上非常有名且功能強大的流程圖、架構圖、模擬圖等…的製作軟體，它本身提供不少精美的元件，讓你能夠製作精美的畫面。它還開放API讓你也能自行開發這些元件，提供給別人使用。我在網路上找到人家開放出來的 iPhone UI元件(stencils)，透過這些元件，我很輕鬆地畫出 iT邦幫忙 App 的模擬且逼真的畫面。不過 OmniGraffle 一套並不便宜，但它提供免費試用，沒有期限，只有元件個數的限制。如果畫面元件不多的話(小於20)，用它來畫圖很夠用了。

我畫出的模擬畫面如下：
1.登入(白底)

2.登入(黑底)

3.載入等待畫面

4.文章列表

5.文章列表分類選擇

6.文章內容

7.主功能表